$(document).ready(function() {
    // 注册方式切换
    const $phoneForm = $('.phone-form');
    const $socialLogin = $('.social-login');

    // 初始化手机注册表单内容
    $phoneForm.html(`
        <form id="phoneRegistrationForm" class="needs-validation" novalidate>
            <div class="form-group mb-3">
                <label for="phone">手机号码</label>
                <input type="tel" class="form-control" id="phone" required
                       pattern="^1[3-9]\\d{9}$" placeholder="请输入手机号码">
                <div class="invalid-feedback">请输入有效的手机号码</div>
            </div>
            <div class="form-group mb-3">
                <label for="verificationCode">验证码</label>
                <div class="input-group">
                    <input type="text" class="form-control" id="verificationCode" 
                           required pattern="^\\d{6}$" placeholder="请输入验证码">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="sendCode">
                            发送验证码
                        </button>
                    </div>
                </div>
                <div class="invalid-feedback">请输入6位数字验证码</div>
            </div>
            <button type="submit" class="btn btn-primary btn-block">注册</button>
        </form>
    `);

    // 初始化社交登录选项
    $socialLogin.html(`
        <div class="social-options text-center">
            <button class="btn btn-outline-primary mb-3 btn-block" data-platform="wechat">
                <i class="fab fa-weixin"></i> 微信登录
            </button>
            <button class="btn btn-outline-primary btn-block" data-platform="qq">
                <i class="fab fa-qq"></i> QQ登录
            </button>
        </div>
    `);

    // 注册方式切换处理
    $('[data-method]').click(function() {
        const method = $(this).data('method');
        if (method === 'phone') {
            $phoneForm.slideDown();
            $socialLogin.slideUp();
        } else {
            $socialLogin.slideDown();
            $phoneForm.slideUp();
        }
    });

    // 发送验证码处理
    let countdown = 60;
    let timer = null;

    $('#sendCode').click(function() {
        const $btn = $(this);
        const phone = $('#phone').val();
        
        if (!/^1[3-9]\d{9}$/.test(phone)) {
            $('#phone').addClass('is-invalid');
            return;
        }

        $btn.prop('disabled', true);
        startCountdown($btn);

        // 模拟发送验证码
        console.log('发送验证码到：', phone);
    });

    function startCountdown($btn) {
        $btn.text(`重新发送(${countdown}s)`);
        timer = setInterval(() => {
            countdown--;
            $btn.text(`重新发送(${countdown}s)`);
            if (countdown === 0) {
                clearInterval(timer);
                $btn.prop('disabled', false).text('发送验证码');
                countdown = 60;
            }
        }, 1000);
    }

    // 表单验证
    $('#phoneRegistrationForm').on('submit', function(e) {
        e.preventDefault();
        if (this.checkValidity()) {
            const formData = {
                phone: $('#phone').val(),
                code: $('#verificationCode').val()
            };
            console.log('提交注册信息：', formData);
            // TODO: 发送注册请求
        }
        $(this).addClass('was-validated');
    });

    // 社交登录处理
    $('.social-options button').click(function() {
        const platform = $(this).data('platform');
        console.log('社交登录平台：', platform);
        // TODO: 处理社交登录
    });
});